<template>
  <div>
      <div class="slider_bg">
        <div class="wrap">
            <div class="slider">
                <h2>区块链资讯</h2>
                <h3>重点打造区块链资讯栏目，关注区块链金融，普及区块链基础知识，报道国内外区块链行业的最新技术应用，翻译区块链新闻稿件。</h3>
            </div>
        </div>
        </div>
        <div class="main_bg" data-find="_5">
        <div class="wrap" data-find="_4">
            <div class="main" data-find="_3">
                <div class="content" data-find="_2">
                    <!-- start blog_left -->
                    <div class="blog_left" data-find="_1">	
                        <div class="blog_main"  v-for="(item, index) in lists" :key="index">
							<div v-if="item.zne_thumb != ''">
							<img  :src="item.zne_thumb" :alt="item.zne_title"> </div>
							 <div class="b_left">
                                <h4 class="bg"><img src="../assets/images/note.jpg" alt=""></h4>
                            </div>
							<div class="b_right">
                                <h4>{{item.zne_title}}</h4>
                                <div class="blog_list">
                                        <ul>
                                            <li><a href="#"> <i class="date"> </i><span>{{item.inputtime}}</span></a></li>
                                            <li><a href="#"> <i class="comment"> </i> <span>{{item.zne_source}}</span></a></li>
                                            <!--<li><a href="#"> <i class="news"> </i><span>Public, News</span></a></li>
                                            <li><a href="#"> <i class="views"> </i><span>124 views</span></a></li>-->
                                        </ul>
                                        <div class="clear"></div>
                                </div>
                                <div class="blog_art">
                                        <ul>
                                            <li><a href="#"> <i> </i><span>{{item.zne_id}}</span></a></li>
                                        </ul>
                                        <div class="clear"></div>
                                </div>
                            </div>
                            <div class="clear"></div>
                            <p data-find="_8">{{item.zne_desc}}</p>
                            <router-link class="btn"  :to="{ name: 'detail', params: { id: item.zne_id }}">查看详细</router-link>
                        </div>  
                      
					  <br/><br/><br/>
						<Pagination></Pagination>
                    </div>
                    <!-- start blog_sidebar -->
                    <Sidebar></Sidebar>    
                <div class="clear"></div>
                </div>
            </div>
        </div>
        </div> 
     
  </div>
</template>

<script>
import Sidebar from './Sidebar'
import Pagination from '../components/Pagination'
export default {
	components:{
		Sidebar,
		Pagination,       
  	},
  data(){
      return {
        keyword:'',
        lists:[],        
      }
  },
  methods :{     
      getDate(){
          this.$fetch( 'news/list?cateogryid=10&t='+Math.random() )
                  .then((response) => {
                    //console.log(response);
                  this.lists = response.data.items                 
                  });
      },
      searchlist (){
          this.$fetch('news/list',this.search)
          .then((response) =>{ 
              if(response.count>0){
                this.lists = response.data.items                
              }
              if(response.count<=0){
                  this.$message( '没有搜索结果' );
                  return false;
              }
          });
      },
     
  },
  mounted (){
      this.getDate();   
  },
}
</script>

<style scoped>
/* start blog page */
.blog_left{
	float: left;
	width: 64.333333%;
}

.b_left{
	float: left;
	width: 10.333333%;
	margin-right: 3.333%;
}
.b_right{
	float: left;
	width: 86.333333%;
}
.b_left h4{
	display: inline-flex;
	padding: 20px 20px;
	text-align: center;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-o-border-radius: 2px;
}
.b_left h4.bg{
	background: #19BD9B;
}
.b_left h4.bg1{
	background: #3498DB;
}
.blog_main:first-child,.blog_main img:first-child{
	margin-top: 0;
}
.blog_main{
	margin: 4% 0;
}
.blog_main img{
	width:100%;
	margin: 4% 0;
}
.blog_main iframe{
	margin-bottom: 4%;
}
.b_right h4{
	color:#34495E;
	font-size: 1.2em;
	font-weight: 600;
	margin-bottom: 2%;
}
/*start blog_list */
.blog_list{
	float: left;
}
.blog_list ul li{
	display:inline-block;
}
.blog_list li a{
	display: block;
	color: #c4c4c4;
	font-size: 0.8725em;
	padding: 10px 8px;
}
.blog_list li a > i{
	width:20px;
	height:20px;
	display:inline-block;
	background:url(../assets/images/blog_icons.png) no-repeat;	
	vertical-align:middle;
	transition:none;
}
.blog_list li a:hover > i{
	background:url(../assets/images/blog_icons.png) no-repeat;	
}
.blog_list li a:hover{
	color: #19BD9B;
}
.blog_list li a span{
	padding-left:5px;
}
.blog_list li a > i.date{
	background-position:0px 0px;
}
.blog_list li a:hover > i.date{
	background-position:0px -21px;
}
.blog_list li a > i.comment{
	background-position: -24px 0px;
}
.blog_list li a:hover > i.comment{
	background-position: -24px -21px;
}
.blog_list li a > i.news {
	background-position: -50px 0px;
}
.blog_list li a:hover > i.news{
	background-position:-50px -21px;
}
.blog_list li a > i.views{
	background-position: -72px 0px;
}
.blog_list li a:hover > i.views{
	background-position:-72px -21px;
}
/*start blog_art */
.blog_art{
	float: right;
}
.blog_art ul li{
	display:inline-block;
}
.blog_art li a{
	display: block;
	color: #c4c4c4;
	font-size: 0.8725em;
	padding: 10px 8px;
}
.blog_art li a > i{
	width:20px;
	height:20px;
	display:inline-block;
	background:url(../assets/images/art.png) no-repeat;	
	vertical-align:middle;
	transition:none;
}
.blog_art li a:hover > i{
	background:url(../assets/images/art_h.png) no-repeat;	
}
.blog_art li a:hover{
	color: #D0D3D7;
}
.blog_art li a span{
	padding-left:5px;
}
/* end blog_list */ 
.blog_left p{
	margin: 2% 0 4%;
	font-size: 0.8725em;
	color: #A1A8AF;
	line-height: 24px;
	font-weight: 600;
}
/******** SAP ************/
.sap_tabs{
	clear:both;
}
.facts{
	padding: 10px 0;
}
.tab-left {
	margin: 4% 0;
}
.top1{
	margin-top: 2%;
}
.resp-tabs-list {
	width: 100%;
}
.resp-tab-item:first-child{
	border-left:none;
}
.resp-tab-item{
	border-left: 1px solid rgb(192, 191, 191);
	border-bottom: 3px solid #19bd9b;
	font-weight:600;
	color: #34495E;
	font-size: 1em;
	background: #e7e7e7;
	text-transform: capitalize;
	cursor: pointer;
	padding: 12px 0;
	display: inline-block;
	text-align: center;
	list-style: none;
	float: left;
	width: 33%;
	outline: none;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.resp-tab-item:hover {
	background: #34495E;
	text-shadow: none;
	color: #FFF;
}
.resp-tab-active{
	background: #19BD9B;
	text-shadow: none;
	color:#fff;
}
.resp-tabs-container {
	padding: 0px;
	background-color: #fff;
	clear: left;
}
h2.resp-accordion {
	cursor: pointer;
	padding: 5px;
	display: none;
}
.resp-tab-content {
	display: none;
}
.resp-content-active, .resp-accordion-active {
   display: block;
}
h2.resp-accordion {
	font-size:1em;
	margin: 0px;
	padding: 10px 15px;
	background:#C5CDD1;
	margin:10px 0;
	color:#FFF;
}
h2.resp-accordion:hover{
	background:#FE2232;
	text-shadow: none;
	color: #FFF;
}
span.tab-img{
	float: left;
	width: 26.3333%;
	margin-right: 6.3333%;
}
.tab-text{
	float:left;
	width: 66.3333%;
}
.tab-text p{
	margin-bottom: 10px;
}
.tab-text p a{
	font-weight: 600;
	color: #34495E;
	font-size: 0.8925em;
	line-height: 1.5em;
	text-transform: capitalize;
}
.tab-text p a:hover{
	color:#19BD9B;
}
.post-meta {
	font-size: 14px;
	margin-bottom: 10px;
}
.post-meta img{
	vertical-align:middle;
	margin-top: -2px;
	margin-right: 10px;
}
.post-meta a {
	color: #8D949E;
	font-size: 0.8725em;
	text-transform: capitalize;
}
.post-meta a:hover{
	color:#19BD9B;
}
/* end tabs */

</style>
